<template>
  <div class="background">
    <div class="head"></div>
    <div class="container">
      <div class="mask">
        <div class="title-container">
          <div
            class="titleImage"
            style="
              width: 100%;
              text-align: center;
              margin-bottom: 20px;
              height: 60px;
            "
          >
            <el-image
              style="height: 100%"
              :src="require('../assets/img/title3-removebg-preview.png')"
              fit="contain"
            />
          </div>
          <div class="searchcontainer">
            <div class="model_research">
              <input
                type="text"
                autocomplete="false"
                placeholder="Search modeling scenarios"
                class="model_research_input"
                v-model="input"
                style="font-size: 16px"
              />

              <el-button
                type="primary"
                style="border-left: none;border-top-left-radius: 0px;border-bottom-left-radius: 0px; border-color: #ffffff;background-color: #049f40;font-size: 16px;height: 40px;}"
              >
                <font-awesome-icon
                  icon="magnifying-glass"
                  style="margin-right: 5px"
                />
                Search</el-button
              >
            </div>
            <el-button
              type="primary"
              style="
                margin-left: 10px;
                background-color: #049f40;
                border-color: #049f40;
                font-size: 16px;
                height: 40px;
              "
              @click="creatMSShower = true"
              >Create</el-button
            >

            <!-- <el-upload
              class="upload-demo"
              action="http://172.21.212.124:8000/upload-file/"
              multiple
              :limit="3"
              :data="{ custom_upload_dir: 'test111' }"
            >
              <el-button type="primary">Click to upload</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  jpg/png files with a size less than 500KB.
                </div>
              </template>
            </el-upload> -->
          </div>
        </div>
        <div class="card-container">
          <div
            class="displayCard"
            :key="index"
            v-for="(item, index) in scenes"
            v-show="!creatMSShower"
          >
            <div class="title">
              <!-- <font-awesome-icon :icon="['fas', 'cube']" /> -->
              <font-awesome-icon icon="cubes" />
              <p style="white-space: nowrap">{{ item.name }}</p>
            </div>
            <div class="content">
              <h2>
                About
                <div class="border"></div>
              </h2>
              <div class="about-txt">
                <p>
                  {{ item.desc }}
                </p>
              </div>

              <h2 style="margin-top: 5px">
                Contact
                <div class="border"></div>
              </h2>
              <div class="s-m">
                <div class="contact-info">
                  <font-awesome-icon icon="user-tie" />
                  <div class="contactname">{{ item.developer }}</div>
                </div>
                <div
                  class="contact-info"
                  style="justify-content: space-between"
                >
                  <div
                    style="
                      display: flex;
                      justify-content: flex-start;
                      align-items: center;
                    "
                  >
                    <font-awesome-icon :icon="['fas', 'envelope']" />
                    <div class="contactname">{{ item.email }}</div>
                  </div>
                  <div>
                    <font-awesome-icon
                      style="
                        color: #049f40;
                        font-weight: bold;
                        font-size: larger;
                        margin-right: 8px;
                      "
                      icon="trash-can"
                      @click="deleteScene(item.id)"
                    />
                    <font-awesome-icon
                      style="
                        color: #049f40;
                        font-weight: bold;
                        font-size: larger;
                      "
                      icon="arrow-right"
                      @click="goModeling(item.id)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="displayCard"
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              color: #ffffff;
              font-size: 60px;
              cursor: pointer;
            "
            v-show="!creatMSShower"
            @click="creatMSShower = true"
          >
            <font-awesome-icon icon="fa-solid fa-plus" />
          </div>
          <!-- <div class="creat-models-mask" v-show="creatMSShower"></div> -->
          <div
            v-show="creatMSShower"
            v-loading="loading"
            element-loading-text="Loading..."
            :element-loading-svg="svg"
            element-loading-svg-view-box="-10, -10, 50, 50"
            class="create-models custom-loading-svg"
          >
            <h3>Create Modeling Scene</h3>
            <el-form
              ref="ModelingScenarioRef"
              :model="ModelingScenario"
              :rules="rules"
              label-width="110px"
              class="demo-ruleForm"
              status-icon
            >
              <el-form-item label="Model name" prop="name">
                <el-input
                  v-model="ModelingScenario.name"
                  placeholder="Please input model name"
                />
              </el-form-item>

              <el-form-item label="Interpreter" prop="interpreter">
                <el-select
                  v-model="ModelingScenario.interpreter"
                  placeholder="Python interpreter"
                >
                  <el-option label="Python 3.7" value="Python3_7" />
                  <el-option label="Python 3.8" value="Python3_8" />
                  <el-option label="Python 3.9" value="Python3_9" />
                </el-select>
              </el-form-item>

              <el-form-item label="Description" prop="desc">
                <el-input
                  v-model="ModelingScenario.desc"
                  type="textarea"
                  maxlength="150"
                  show-word-limit
                />
              </el-form-item>

              <el-form-item label="Developer" prop="developer">
                <el-input
                  v-model="ModelingScenario.developer"
                  placeholder="Please input developer name"
                />
              </el-form-item>

              <el-form-item label="Email" prop="email">
                <el-input
                  v-model="ModelingScenario.email"
                  placeholder="Please input email"
                />
              </el-form-item>

              <el-form-item label="Authority" prop="authority">
                <el-radio-group v-model="ModelingScenario.authority">
                  <el-radio label="Public" />
                  <el-radio label="Private" />
                </el-radio-group>
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  @click="creatModelingScenario(ModelingScenarioRef)"
                  style="background-color: #049f40; border-color: #049f40"
                >
                  Create
                </el-button>
                <el-button @click="creatMSShower = false">Cancel</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="redirect">
          <el-button
            type="success"
            style="
              background-color: transparent;
              border-color: transparent;
              font-size: 16px;
              height: 40px;
            "
            @click="goLibrary"
          >
            Library<font-awesome-icon
              icon="right-from-bracket"
              style="margin-left: 5px"
          /></el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
import { ElForm, ElFormItem, ElInput } from "element-plus";
import axios from "axios";
import { ElNotification } from "element-plus";
import { config } from "../components/ModelingComponents/Config.js";
export default {
  data() {
    return {
      scenes: [
        {
          name: "FDS",
          interpreter: "Python3_8",
          desc: "Building indoor fire simulation based on FDS model",
          developer: "Fengyuan Zhang",
          email: "zhangfengyuangis@163.com",
          authority: "PUBLIC",
        },
      ],
      ModelingScenarioRef: ref(null),
      ModelingScenario: ref({
        name: "CREST",
        interpreter: "Python3_8",
        desc: "Distributed hydrological modelling scenarios",
        developer: "Yuanqing He",
        email: "heyuanqing007@163.com",
        authority: "Public",
      }),
      rules: ref({
        name: [
          {
            required: true,
            message: "Please input model name",
            trigger: "blur",
          },

          {
            min: 1,
            max: 16,
            message: "Length should be 3 to 5",
            trigger: "blur",
          },
        ],

        interpreter: [
          {
            required: true,
            message: "Please select Python Interpreter",
            trigger: "change",
          },
        ],

        developer: [
          {
            required: true,
            message: "Please input model name",
            trigger: "blur",
          },
        ],

        email: [
          {
            required: true,
            message: "Please input Email",
            trigger: "blur",
          },
          {
            type: "email",
            message: "Please enter the correct email address",
            trigger: "blur",
          },
        ],
        authority: [
          {
            required: true,
            message: "Please select activity resource",
            trigger: "change",
          },
        ],
        desc: [
          {
            required: true,
            message: "Please input model description",
            trigger: "blur",
          },
        ],
      }),
      creatMSShower: false,
      svg: `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `,
      loading: false,
    };
  },
  methods: {
    creatModelingScenario() {
      var ScInfo = this.ModelingScenario;
      if (
        ScInfo.name == "" ||
        ScInfo.interpreter == "" ||
        ScInfo.desc == "" ||
        ScInfo.developer == "" ||
        ScInfo.email == "" ||
        ScInfo.authority == ""
      ) {
        ElNotification.error({
          title: "Error",
          message: "Please input full information",
          offset: 6,
        });
        return;
      }
      const _this = this;
      this.loading = true;
      ScInfo.code =
        "def print_hi(name):\n  print(f'Hello, {name}')\n\nif __name__ == '__main__':\n  print_hi('world!')";
      axios.post(config.httpIP + "creatModelingScene", ScInfo).then((resp) => {
        if (resp.data != "error") {
          _this.$router.push({
            path: "/modeling",
            query: { sceneID: resp.data },
          });
        } else {
          ElNotification.error({
            title: "Error",
            message: "模型运行容器创建失败！",
            offset: 6,
          });
        }
        _this.loading = false;
      });
    },
    getModelingScenes() {
      const _this = this;
      axios.get(config.httpIP + "getModelingScenes").then((resp) => {
        _this.scenes = resp.data;
      });
    },
    goModeling(id) {
      this.$router.push({
        path: "/modeling",
        query: { sceneID: id },
      });
    },
    deleteScene(id) {
      const _this = this;
      axios
        .post(config.httpIP + "deleteModelingScene", { id: id })
        .then((resp) => {
          if (resp.data != "error") {
            _this.getModelingScenes();
          } else {
            ElNotification.error({
              title: "Error",
              message: "建模场景删除失败！",
              offset: 6,
            });
          }
        });
    },
    goLibrary() {
      this.$router.push({
        path: "/modellibrary",
      });
    },
  },
  mounted() {
    this.getModelingScenes();
  },
};
</script>
<style lang="less" scoped>
.redirect {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #fff;
}
.background {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.head {
  box-sizing: border-box;
  width: 100%;

  height: 65px;
  background: black;
}
.container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 65px);

  background-image: url("../assets/img/bacg.png");
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}
.container .mask {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // background-color: rgba(0, 0, 0, 0.75);
}
.container .mask .title-container {
  width: 100%;
  height: 30%;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container .mask .title-container .searchcontainer {
  height: 60px;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .mask .title-container .model_research {
  position: relative;
  font-size: 14px;
  display: inline-flex;
  width: 100%;
}
.model_research_input {
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0.6);
  background-image: none;
  border-radius: 4px 0px 0px 4px;
  border: 1px solid #ffffff;
  border-right: none;

  box-sizing: border-box;
  color: #ffffff;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

.model_research_input::-webkit-input-placeholder {
  color: #c3c5ca;
}

.container .mask .card-container {
  position: relative;
  display: flex;
  width: 100%;
  height: fit-content;
  flex-direction: row;
  justify-items: center;
  align-content: center;
  flex-wrap: wrap;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 0px 20px;
  // background-color: black;
}

.container .mask .card-container .displayCard {
  width: 300px;
  height: 350px;
  margin: 10px;
  box-shadow: 0 3.2px 7.2px 0 rgb(0, 0, 0, 0.13);
  box-shadow: 0 2px 2px #888888;
  border: 1px solid #9a9a9a;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.container .mask .card-container .displayCard .title {
  width: 100%;
  height: 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 60px;
  color: #ffffff;
  margin-top: 20px;
  padding: 0px 10px;
  box-sizing: border-box;
}
.container .mask .card-container .displayCard .title p {
  color: rgb(255, 255, 255);
  font-size: 28px;
  margin: 10px 0px 0px 0px;
}
.container .mask .card-container .displayCard .content {
  width: 100%;
  height: fit-content;
  padding: 0px 12px 5px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}
.content h2 {
  position: relative;
  font-size: 16px;
  margin-top: 0px;
}
.content .border {
  width: 30px;
  height: 3px;
  background: #049f40;
  position: absolute;
  left: 0;
  bottom: -6px;
}
.content .about-txt {
  width: 100%;
  height: 80px;
  overflow: auto;
}
.content p {
  text-align: left;
  font-size: 14px;
  margin-top: 0px;
  margin-bottom: 0px;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* 限制显示3行文本 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.content .contact-info {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 6px;
}
.s-m {
  /* text-align: center; */
  display: flex;
  flex-direction: column;
  justify-items: flex-start;
  /* flex-direction: column; */
}

.s-m a {
  text-decoration: none;
  font-size: 20px;
  color: #333;
  margin-right: 5px;
  transition: 0.4s;
}

.s-m p {
  font-size: 14px;
}

.s-m a:hover {
  color: #778beb;
}
.s-m .contactname {
  margin-left: 8px;
  font-size: 13px;
}
.creat-models-mask {
  position: absolute;
  z-index: 5px;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
}
.create-models {
  position: absolute;
  width: 420px;
  height: fit-content;
  box-sizing: border-box;
  padding: 0px 20px 0px 10px;
  z-index: 9px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 3.2px 7.2px 0 rgb(0, 0, 0, 0.13);
  box-shadow: 0 2px 2px #888888;
  border: 2px solid #9a9a9a;
  background-color: rgba(0, 0, 0, 0.6);
}
.create-models h3 {
  color: white;
  text-align: center;

  margin: 10px 0px;
}

.demo-ruleForm /deep/ label {
  color: white;
}
.demo-ruleForm /deep/ .el-input__wrapper {
  background-color: rgba(0, 0, 0, 0);
  color: white;
}
.demo-ruleForm /deep/ .el-input__inner {
  color: white;
}
.demo-ruleForm /deep/ .el-textarea__inner {
  background-color: rgba(0, 0, 0, 0);
  color: white;
}
.demo-ruleForm /deep/ .el-input__count {
  background-color: rgba(0, 0, 0, 0);
  color: white;
}
.demo-ruleForm /deep/ .is-checked .el-radio__inner {
  background-color: #049f40;
  border-color: #049f40;
}
.demo-ruleForm /deep/ .is-checked .el-radio__label {
  color: #049f40;
}
</style>